<template>
	<view class="main-admin">
	  <view class="admin-info bg-admin">
		<image class="pic" src="/static/管理员.png" mode="scaleToFill"/>
		<!-- <view></view> -->
		<view class="right">
		  <view class="name">
			<text class="text-xl">{{ name }}</text>
		  </view>
		  <view class="role">
			<text v-if="type == 1" class="tag small bg-orange light radius">超级管理员</text>
			<text v-if="type == 0" class="tag small bg-green radius">普通管理员</text>
		  </view>
		  <view class="desc text-s">共登录{{ cnt }}次，本次{{ last }}</view>
		</view>
		<view class="exit-admin" @tap="bindExitTap"><text class="icon-exit"></text></view>
	  </view>
	  <view class="comm-list grid col-3">
		<view class="item" @click="mgr_user_user">
		  <text class="icon-group_fill text-green"></text>
		  <text class="text-black" style="color: #67c23a; margin-top: 12px;">用户管理</text>
		</view>
		<view class="item" @click="Dynamic_Dynamic">
		  <text class="icon-formfill text-darkgreen"></text>
		  <text class="text-black" style="color: #3c8dbc">动态&介绍管理</text>
		</view>
		<view class="item" @click="homemaking_homemaking">
		  <text class="icon-timefill text-red"></text>
		  <text class="text-black" style="color: #f56c6c">家政员&预约管理</text>
		</view>
	  </view>
  
	  <view class="comm-list menu margin-top">
		<view class="item arrow"  @click="AboutUs_AboutUs">
		  <view class="content">
			<text class="icon-edit text-darkgreen" ></text>
			<text class="text-black">编辑 - 关于我们</text>
		  </view>
		</view>
		<view class="item arrow"  @click="AboutUs_xcxrwm">
		  <view class="content">
			<text class="icon-qr_code text-mauve"></text>
			<text class="text-black">小程序二维码</text>
		  </view>
		</view>
	  </view>
  
	  <view class="comm-list menu">
		<view v-if="isSuperAdmin" class="item arrow" @click="mgr_list_admin_mgr_list">
		  <view class="content">
			<text class="icon-profile text-red"></text>
			<text class="text-black">系统管理员管理</text>
		  </view>
		</view>
		<view class="item arrow" @click="mgr_pwd_admin_mgr_pwd">
		  <view class="content">
			<text class="icon-lock text-orange"></text>
			<text class="text-black">修改我的管理员密码</text>
		  </view>
		</view>
		<view class="item arrow" @click="mgr_log_admin_mgr_log">
		  <view class="content">
			<text class="icon-footprint text-brown"></text>
			<text class="text-black">管理员操作日志</text>
		  </view>
		</view>
	  </view>
  
	  <view class="comm-list menu margin-bottom-xl">
		<view class="item arrow" @tap="bindMoreTap">
		  <view class="content">
			<text class="icon-settings text-grey"></text>
			<text class="text-black">更多设置</text>
		  </view>
		</view>
	  </view>
  
	  <button @tap="bindExitTap" class="btn-admin margin-top">退出登录</button>
	  
	</view>
  </template>
  
  <script setup>
  import { ref,onMounted } from 'vue';
  import { 
	adminGetadminByToken
   } from '@/request/api.js'
   const name=ref('');
   const type=ref('');
   const cnt=ref('');
   const last=ref('');
   const isSuperAdmin = ref(true)
   
   onMounted(() => {
	uni.removeStorageSync('adminAddHomemaking');
	adminGetadminByToken({
	  token:uni.getStorageSync('adminToken')
	}).then((res) => {
	  console.log(res)
	  if(res.data.code==200){
		name.value= res.data.data.name;
		type.value= res.data.data.position;
		cnt.value= res.data.data.loginCount;
		last.value= res.data.data.time;
		if(res.data.data.position==1){
		  isSuperAdmin.value=true;
		}else{
		  isSuperAdmin.value=false;
		}
	  }else{
		uni.showToast({
			title: res.data.msg,
			icon: 'none'
		  });
		}
	});
  
  });
	  function mgr_list_admin_mgr_list(){
		uni.navigateTo({
		  url: '/pages/admin/mgr/list/admin_mgr_list'
		});
	  }
   
	  function mgr_pwd_admin_mgr_pwd(){
		uni.navigateTo({
		  url: '/pages/admin/mgr/pwd/admin_mgr_pwd'
		});
	  }
	  function mgr_log_admin_mgr_log(){
		uni.navigateTo({
		  url: '/pages/admin/mgr/log/admin_mgr_log'
		});
	  }
	  function mgr_user_user(){
		uni.navigateTo({
		  url: '/pages/admin/user/user'
		});
	  }
	  function Dynamic_Dynamic(){
		uni.navigateTo({
		  url: '/pages/admin/Dynamic/Dynamic'
		});
	  }
	  function AboutUs_AboutUs(){
		uni.navigateTo({
		  url: '/pages/admin/AboutUs/AboutUs'
		});
	  }
	  function homemaking_homemaking(){
		uni.navigateTo({
		  url: '/pages/admin/homemaking/homemaking'
		});
	  }
	  function bindExitTap(){
		uni.removeStorageSync('adminToken');
		uni.redirectTo({
		  url: '/pages/admin/login/admin_login'
		});
	  }
	  function AboutUs_xcxrwm() {
				  uni.navigateTo({
					  url: '/pages/admin/index/xcxrwm'
				  });
			  }
  </script>
  
  <style scoped>
  .main-admin {
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	background-image: linear-gradient(180deg, #2196F3, #e0e6ed);
	padding: 20px;
	min-height: 100vh;
  }
  
  .admin-info {
	background-color: #ffffff;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	padding: 10px;
	display: flex;
	align-items: center;
	margin-bottom: 0px;
	margin-top: -5px;
  }
  
  .admin-info .pic {
	width: 100px;
	height: 100px;
	margin-right: 20px;
  }
  
  .admin-info .right {
	flex: 1;
	display: flex;
	flex-direction: column;
  }
  
  .admin-info .name {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 5px;
  }
  
  .admin-info .role {
	margin-bottom: 10px;
  }
  
  .admin-info .tag {
	font-size: 10px;
	padding: 4px 8px;
	border-radius: 10px;
	background-color: #67c23a;
	color: #ffffff;
  }
  
  .admin-info .tag.bg-orange {
	background-color: #f56c6c;
  }
  
  .admin-info .tag.bg-green {
	background-color: #67c23a;
  }
  
  .admin-info .desc {
	font-size: 14px; /* 调整字体大小 */
	color: #555; /* 调整字体颜色，使其不那么突兀 */
	line-height: 1.5; /* 增加行高，提高阅读体验 */
	/* margin-bottom: 10px; 与下方元素的间距 */
	max-width: 600px; /* 限制描述内容的宽度，防止过长 */
	word-wrap: break-word; /* 允许在单词内换行 */
  }
  
  
  .admin-info .exit-admin {
	cursor: pointer;
	position: absolute;
	top: 30px;
	right: 30px;
	font-size: 36px;
	color: #f56c6c;
  }
  
  .bar {
	margin-top: -20px;
	padding: 25px;
	background-color: #ffffff;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 20px;
	color: #333;
	border-bottom: 1px solid #e0e6ed;
  }
  
  .comm-list.grid.col-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px; /* 增加项目之间的间距 */
	margin-top: 0px;
	padding: 10px 0;
  }
  
  .comm-list .item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .comm-list .item:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }
  
  .comm-list .icon {
	font-size: 24px; /* 调整图标大小 */
	margin-bottom: 10px; /* 增加图标与文本的间距 */
	color: #409eff; /* 设置图标颜色 */
  }
  
  .comm-list .text-black {
	font-size: 16px; /* 调整文本大小 */
	font-weight: 500; /* 设置文本权重 */
	color: #333; /* 设置文本颜色 */
  }
  
  /* 为不同的图标设置不同的颜色
  .comm-list .icon-group_fill {
	color: #67c23a;
  }
  
  .comm-list .icon-formfill {
	color: #3c8dbc;
  }
  
  .comm-list .icon-timefill {
	color: #f56c6c;
  } */
  
  /* 为文本添加一些样式 */
  .comm-list .text-black {
	font-size: 16px; /* 调整文本大小，可根据实际需求调整 */
	font-weight: 500; /* 中等粗细，使文本更加突出 */
	color: #333; /* 深灰色，提高对比度和可读性 */
	text-align: center; /* 居中对齐 */
	margin-top: 5px; /* 与图标的间距，可根据实际需求调整 */
  }
  /* 为不同项的文本设置不同的颜色，以增强视觉效果 */
  .comm-list .item[data-url*="admin_user_list"] .text-black {
	color: #67c23a; /* 用户管理 */
  }
  
  .comm-list .item[data-url*="admin_news_list"] .text-black {
	color: #3c8dbc; /* 动态&介绍管理 */
  }
  
  .comm-list .item[data-url*="admin_meet_list"] .text-black {
	color: #f56c6c; /* 家政员&预约管理 */
  }
  
  .menu .item {
	/* width: 100%; */
	padding: 5px;
	text-align: center;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.3s;
	margin-bottom: 10px;
	background-color: #ffffff;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }
  
  .menu .item:hover {
	background-color: #eef1f6;
	transform: translateY(-3px);
  }
  
  .btn-admin {
	display: block;
	width: 100%;
	/* margin: 50px 0 30px; */
	background-image: linear-gradient(45deg, #409eff, #9c89ff);
	color: #ffffff;
	padding: 0px;
	border: none;
	border-radius: 10px;
	font-size: 20px;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.3s;
  }
  
  .btn-admin:hover {
	background-color: #337ecc;
	transform: translateY(-3px);
  }
  
  /* 根据图片中的色调调整颜色 */
  .text-green { color: #67c23a; }
  .text-darkgreen { color: #3c8dbc; }
  .text-red { color: #f56c6c; }
  .text-orange { color: #f39c12; }
  .text-mauve { color: #605ca8; }
  .text-brown { color: #d4aa00; }
  .text-grey { color: #909399; }
  .bg-orange { background-color: #f39c12; }
  .bg-green { background-color: #67c23a; }
  </style>